<template>
  <div class="main">
    <div style="padding: 20px 20px 20px 2rem; background-color: white">
      <PlusSearch
        v-model="searchValues"
        :columns="searchColumns"
        :show-number="2"
        @search="searchSubmit"
      />
    </div>

    <div
      ref="contentRef"
      :class="['flex', deviceDetection() ? 'flex-wrap' : '']"
    >
      <PureTableBar
        class="w-full"
        title="调解申请"
        :columns="columns"
        @refresh="refreshTable"
      >
        <template #buttons>
          <el-button
            type="primary"
            :icon="useRenderIcon(AddFill)"
            @click="formOpen('新增')"
          >
            新增调解
          </el-button>
        </template>
        <template v-slot="{ size, dynamicColumns }">
          <pure-table
            ref="tableRef"
            align-whole="center"
            showOverflowTooltip
            table-layout="auto"
            :loading="tableLoading"
            :size="size"
            adaptive
            :adaptiveConfig="{ offsetBottom: 108 }"
            :data="dataList"
            :columns="dynamicColumns"
            :pagination="{ ...pagination, size }"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange"
          >
            <template #image="{ row, index }">
              <el-image
                preview-teleported
                loading="lazy"
                :src="row.thumbnailUrl"
                :preview-src-list="dataList.map(v => v.thumbnailUrl)"
                :initial-index="index"
                fit="cover"
                class="w-[60px] h-[60px]"
              />
            </template>
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                :icon="useRenderIcon(EditPen)"
                @click="formOpen('修改', row)"
              >
                修改
              </el-button>
              <el-popconfirm title="确认删除吗？" @confirm="handleDelete(row)">
                <template #reference>
                  <el-button
                    class="reset-margin"
                    link
                    type="primary"
                    :size="size"
                    :icon="useRenderIcon(Delete)"
                  >
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
    <PlusDrawerForm
      v-model:visible="formVisible"
      v-model="formValues"
      :destroy-on-close="true"
      :form="{ columns: formColumns, rules: formRules }"
      :title="`${formTitle}调解申请`"
      size="800px"
      @confirm="formSubmit"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, nextTick, onMounted, h } from "vue";
import { message } from "@/utils/message";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import type { PaginationProps } from "@pureadmin/table";
import { deviceDetection } from "@pureadmin/utils";
import {
  casesList,
  addCases,
  getCasesEnums,
  updateCases,
  deleteCases
} from "@/api/zhaoyuan";
import type { OptionsRow } from "plus-pro-components";

import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import AddFill from "@iconify-icons/ri/add-circle-line";

defineOptions({
  name: "News"
});
//获取页面的所有枚举数组
const pageEnums = ref<{ [key: string]: OptionsRow[] }>({});
const getPageEnums = async () => {
  let res = await getCasesEnums();
  pageEnums.value = res;
};
getPageEnums();
// 引入搜索逻辑
import { useSearch } from "./search";
// 使用搜索逻辑
const { searchValues, searchColumns } = useSearch(pageEnums);
const searchSubmit = (values: any) => {
  console.log(searchValues.value, "search");
  page.value = 1;
  getTableData();
};
const refreshTable = (values: any) => {
  page.value = 1;
  getTableData();
};
// 引入表单逻辑
import { useForm } from "./form";
// 使用表单逻辑
const {
  formRules,
  formColumns,
  formVisible,
  formValues,
  formOpen,
  formTitle,
  formId
} = useForm(pageEnums);
const formSubmit = () => {
  if (formTitle.value === "修改") {
    updateCases(formId.value, formValues.value).then(() => {
      message("新增成功", { type: "success" });
      formVisible.value = false;
      getTableData();
    });
  } else {
    addCases(formValues.value).then(() => {
      message("新增成功", { type: "success" });
      formVisible.value = false;

      getTableData();
    });
  }
};

//列表逻辑
const dataList = ref([]);
const tableLoading = ref(false);
const page = ref(1);
const size = ref(10);
const pagination = reactive<PaginationProps>({
  total: 0,
  pageSize: 4,
  currentPage: 1,
  background: true
});
const getTableData = async () => {
  if (tableLoading.value) {
    return;
  }
  tableLoading.value = true;
  const res = await casesList({
    ...searchValues.value,
    ...{ page: page.value, size: size.value }
  });
  dataList.value = res?._embedded?.items || [];
  pagination.total = res.page.totalElements;
  pagination.pageSize = res.page.size;
  pagination.currentPage = res.page.number;
  tableLoading.value = false;
};

//表格列
const columns: TableColumnList = [
  {
    label: "编号",
    prop: "id"
  },
  {
    label: "标题",
    prop: "title"
  },
  {
    label: "分类",
    slot: "category"
  },
  {
    label: "是否存档",
    prop: "archived"
  },

  {
    label: "申请时间",
    prop: "applyTime"
  },
  {
    label: "创建时间",
    prop: "createdDate"
  },
  {
    label: "状态",
    prop: "status",
    minWidth: 160
  },
  {
    label: "操作",
    fixed: "right",
    width: 210,
    slot: "operation"
  }
];

function handleDelete(row) {
  deleteCases(row.id).then(() => {
    message("删除成功！", { type: "success" });
    getTableData();
  });
}

function handleSizeChange(val: number) {
  page.value = 1;
  size.value = val;
  getTableData();
}

function handleCurrentChange(val: number) {
  console.log("handleCurrentChange");
  page.value = val;
  getTableData();
}

onMounted(() => {
  getTableData();
});
</script>

<style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
